import React, { useEffect, useState, useRef } from 'react';
import { Modal, Space, Button, Tabs, Form, Row, Col, Input, Select, DatePicker, Table, Card } from 'dw-mx';
import { useSewTask } from 'dw-mx-sew';
import { Code } from 'dw-mx-extend';
import { request } from 'dw-mx-request';
import { StringCell } from 'dw-mx-table';

export default function ProcessInfo(props) {
    const { Column } = Table;
    const [form] = Form.useForm();
    const { havewaitingtask } = props;
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();

    const [initValues, setInitValues] = useState(null);

    const initForm = async () => {
        const result = await request('/mx/SEWEngine/getBusinessFormPI', { piid: processVars.getPiid(), haveWaitingTask: havewaitingtask });
        setInitValues({
            piid_sum: result.formvds[0].piid_sum,
            biz: result.formvds[0].biz,
            pdlabel_sum: result.formvds[0].pdlabel_sum,
            pdid_sum: result.formvds[0].pdid_sum,
            wsdataurl: result.formvds[0].wsdataurl,
            additionalpolabel: result.formvds[0].additionalpolabel,
            begin_time_sum: result.formvds[0].begin_time_sum,
            end_time_sum: result.formvds[0].end_time_sum,
            piendflag: result.piendflag,
            parentpiid: result.formvds[0].parentpiid,
        });
    };

    const initTable = async () => {
        const result = await request('/mx/SEWEngine/getBusinessGridPI', { piid: processVars.getPiid() });
        setTableData(result.gridvds);
    };

    useEffect(() => {
        initForm();
        initTable();
    }, []);

    const callback = async () => {};

    // UI
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };

    const tailLayout = {
        wrapperCol: { offset: 6, span: 18 },
    };

    const [tableData, setTableData] = useState([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys);
        },
    };

    const tabPagination = {
        pageSize: 5,
        showQuickJumper: true,
    };

    return initValues ? (
        <>
            <div style={{ height: 550 }}>
                <Form form={form} {...layout} layout={'horizontal'} initialValues={initValues}>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="业务流水号" name="piid_sum">
                                <Input maxLength={10} readOnly={true} disabled={true} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="业务隶属机构" name="biz">
                                <Input maxLength={10} readOnly={true} disabled={true} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="业务名称" name="pdlabel_sum">
                                <Input maxLength={10} readOnly={true} disabled={true} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="业务定义ID" name="pdid_sum">
                                <Input maxLength={10} readOnly={true} disabled={true} />
                            </Form.Item>
                        </Col>
                    </Row>
                    {initValues.wsdataurl != null && initValues.wsdataurl != '' && (
                        <Row>
                            <Col span={24}>
                                <Form.Item label="业务主体" name="wsdataurl">
                                    <Input maxLength={10} readOnly={true} disabled={true} />
                                </Form.Item>
                            </Col>
                        </Row>
                    )}
                    {initValues.additionalpolabel != null && initValues.additionalpolabel != '' && (
                        <Row>
                            <Col span={24}>
                                <Form.Item label="附加业务主体" name="additionalpolabel">
                                    <Input maxLength={10} readOnly={true} disabled={true} />
                                </Form.Item>
                            </Col>
                        </Row>
                    )}
                    <Row>
                        <Col span={12}>
                            <Form.Item label="业务开始时间" name="begin_time_sum">
                                {/*<DatePicker picker={'date'} disabled={true} format={'YYYY-MM-DD HH:mm:ss'} />*/}
                                <Input maxLength={10} readOnly={true} disabled={true} />
                            </Form.Item>
                        </Col>
                        {initValues.piendflag != null && initValues.piendflag === '0' && (
                            <Col span={12}>
                                <Form.Item {...tailLayout}>正在运行</Form.Item>
                            </Col>
                        )}
                    </Row>
                    {initValues.end_time_sum != null && initValues.end_time_sum != '' && (
                        <Row>
                            <Col span={24}>
                                <Form.Item label="业务完成时间" name="end_time_sum">
                                    <Input maxLength={10} readOnly={true} disabled={true} />
                                </Form.Item>
                            </Col>
                        </Row>
                    )}
                    {initValues.parentpiid != null && initValues.parentpiid != '' && (
                        <Row>
                            <Col span={24}>
                                <Form.Item label="父业务编号" name="parentpiid">
                                    <Input maxLength={10} readOnly={true} disabled={true} />
                                </Form.Item>
                            </Col>
                        </Row>
                    )}

                    <Card title="当前业务的活动任务">
                        <Table rowSelection={{ type: 'radio', columnWidth: '50', ...rowSelection }} rowKey={'tid_sum'} dataSource={tableData} scroll={{ x: 250, y: 300 }} pagination={tabPagination} bordered>
                            <Column
                                ellipsis={true}
                                title="任务号"
                                dataIndex="tid_sum"
                                key="tid_sum"
                                align={'center'}
                                width={200}
                                render={(value, record, index) => {
                                    return <StringCell value={value} align={'center'} />;
                                }}
                            />
                            <Column
                                ellipsis={true}
                                title="任务名"
                                dataIndex="tdlabel_sum"
                                key="tdlabel_sum"
                                align={'center'}
                                width={200}
                                render={(value, record, index) => {
                                    return <StringCell value={value} align={'center'} />;
                                }}
                            />
                            <Column
                                ellipsis={true}
                                title="当前处理人"
                                dataIndex="assigneename_sum"
                                key="assigneename_sum"
                                align={'center'}
                                render={(value, record, index) => {
                                    return <StringCell value={value} align={'center'} />;
                                }}
                            />
                            <Column
                                ellipsis={true}
                                title="有权办理人"
                                dataIndex="candidatename_sum"
                                key="candidatename_sum"
                                align={'center'}
                                render={(value, record, index) => {
                                    return <StringCell value={value} align={'center'} />;
                                }}
                            />
                        </Table>
                    </Card>

                    <Col style={{ marginTop: '20px' }}>
                        <Row justify={'end'}>
                            <Space>
                                <Button type={'primary'} onClick={() => props.claimTask(selectedRowKeys)}>
                                    签领
                                </Button>
                            </Space>
                        </Row>
                    </Col>
                </Form>
            </div>
        </>
    ) : (
        <div style={{ height: 550 }}>
            <div>Loading.....</div>
        </div>
    );
}
